<template>
  <div class="h111">
    <el-card style="max-width: 480px">
      <el-form
        :rules="rules"
        ref="ruleFormRef"
        label-width="80px"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item prop="username" label="用户名">
          <el-input v-model="formInline.username" placeholder="请输入用户名" clearable />
        </el-form-item>

        <el-form-item prop="password" label="密码">
          <el-input
            type="password"
            v-model="formInline.password"
            placeholder="请输入密码"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import axios from '@/utils/index'
import { useRouter } from 'vue-router'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
interface RuleForm {
  username: string
  password: string
}
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const formInline = reactive({
  username: '阿基米德',
  password: '阿基米德'
})
const rules = reactive<FormRules<RuleForm>>({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
})
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('/api/login', formInline).then((res) => {
        if (res.data.code == 10000) {
          localStorage.setItem('token', res.data.data.accessToken)
          localStorage.setItem('accessToken', res.data.data.accessToken)
          localStorage.setItem('refreshToken', res.data.data.refreshToken)
          localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
          router.push('/layout')
        }
        console.log(res)
      })
    }
  })
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
